<template>
  <a-form-item
    :label="config.labelName"
    :rules="[{ required: config.rulesRquired, message: `${config.labelName}必填` }]"
    :label-col-flex="config.LabelWidth"
    :style="{ width: config.LabelWidth }"
  >
    <a-select popup-container="html" 
      :loading="pageData.loading"
      @search="getList"
      v-model="pageData.id"
      :filter-option="false"
      allow-search
      @change="changeSelect"
      :style="{ width: config.LabelWidth }"
      style="width:300px !important;"
    >
      <!-- @focus="focus(pageData.selectName)" -->
      <a-option 
      style="width:300px;"
       v-for="item in pageData.list" :value="item['id']" :key="item['id']">{{
        item['greyCode'] + '+' + item['grayFabricName']
      }}</a-option>
    </a-select>
  </a-form-item>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { post } from '@/api/http'
import { Message } from '@arco-design/web-vue'
// ts写法
interface SelectInf {
  labelName?: string
  rulesRquired?: string
  LabelWidth?: string
}
const props = withDefaults(
  defineProps<{
    config: SelectInf | any
  }>(),
  {
    config: {
      LabelWidth: '200px', //label宽度
      rulesRquired: true, //是否必填
      labelName: '编号', //label名称
      url: '', //接口
    },
  }
)
const emits = defineEmits(['change'])
let pageData = reactive<{
  selectName: string
  list: any
  loading: boolean
  id: string
}>({
  selectName: '',
  list: [],
  loading: false,
  id: '',
})

onMounted(() => {
  getList()
})
// 获取公司列表
const getList = async (val?: any) => {
  try {
    pageData.loading = true
    const res = await post({
      url: props.config.url,
      data: { grayFabricName: val ? val : '' },
    })
    if (res.code == 200) {
      pageData.loading = res.data
      console.log(res)
      return
    }
    Message.error(res.message)
  } catch (error: any) {
    pageData.loading = false
  } finally {
    pageData.loading = false
  }
}
const changeSelect = (id: string) => {
  let select = pageData.list.filter((item: any) => {
    return item.id == id
  })
  emits('change', select)
}
</script>
